Skip to content

Add code highlighting for "use workflow" and "use step" directives in docs landing page#584

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/update-landing-page-docs
Draft

Add code highlighting for "use workflow" and "use step" directives in docs landing page#584
Copilot wants to merge 3 commits intomainfrom
copilot/update-landing-page-docs

Conversation

Copy link
Contributor

Copilot AI commented Dec 9, 2025 •
edited
Loading

Adds visual highlighting to the directive strings in the "Effortless Setup" code examples to make them stand out, using the same Shiki notation transformer approach as the rest of the docs for consistency.

Changes

  • docs/app/(home)/components/code-block.tsx: Use transformerNotationHighlight from @shikijs/transformers for code highlighting
  • docs/app/(home)/components/implementation.tsx: Added // [!code highlight] notation to the directive lines
  • docs/package.json: Added @shikijs/transformers dependency

Usage

The code examples now use the standard Shiki notation for highlighting:

export async function userSignup(email) {
  "use workflow"; // [!code highlight]
  // ...
}

Screenshot

Original prompt

Update the landing page in the docs. Add a code higlight to the "use workflow" and "use step" directive usage in the code examples insude the "Effortless Steup" section

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@changeset-bot
Copy link

changeset-bot bot commented Dec 9, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 71cce8f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link
Contributor

vercel bot commented Dec 9, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
example-nextjs-workflow-turbopack Ready Ready Preview Comment Dec 9, 2025 7:37pm
example-nextjs-workflow-webpack Ready Ready Preview Comment Dec 9, 2025 7:37pm
example-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-astro-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-express-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-fastify-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-hono-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-nitro-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-nuxt-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-sveltekit-workflow Ready Ready Preview Comment Dec 9, 2025 7:37pm
workbench-vite-workflow Error Error Dec 9, 2025 7:37pm
workflow-docs Ready Ready Preview Comment Dec 9, 2025 7:37pm

@pranaygp
Add code highlighting for "use workflow" and "use step" directives in…
e7759a2 
… Effortless Setup section

Co-authored-by: pranaygp <1797812+pranaygp@users.noreply.github.com>
Copilot AI changed the title [WIP] Update landing page with code highlights for directives Add code highlighting for "use workflow" and "use step" directives in docs landing page Dec 9, 2025
Copilot AI requested a review from pranaygp December 9, 2025 18:20
@pranaygp
Copy link
Collaborator

pranaygp commented Dec 9, 2025 •
edited
Loading

@copilot can we use the shiki transformer approach instead, just like we do in there set of the docs content pages. Let's be consistent with that - including visually consistency instead of creating new styling

@pranaygp
Copy link
Collaborator

pranaygp commented Dec 9, 2025

@copilot I meant shiki, not shake (that was my autocorrect sorry)

@pranaygp
Use Shiki notation transformer for code highlighting consistency
71cce8f 
Co-authored-by: pranaygp <1797812+pranaygp@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Dec 9, 2025

@copilot can we use the shiki transformer approach instead, just like we do in there set of the docs content pages. Let's be consistent with that - including visually consistency instead of creating n...

Updated to use the // [!code highlight] Shiki notation transformer approach with transformerNotationHighlight from @shikijs/transformers. This is now consistent with the docs content pages and uses the fumadocs shiki.css styles. See commit 71cce8f.

Screenshot showing consistent highlighting

@socket-security
Copy link

socket-security bot commented Dec 9, 2025

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security		 Vulnerability Quality Maintenance License
Updatednpm/​@​shikijs/​transformers@​3.15.0 ⏵ 3.19.010010073 +198 +4100

View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pranaygp pranaygp Awaiting requested review from pranaygp

At least 1 approving review is required to merge this pull request.

Assignees

@pranaygp pranaygp

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pranaygp